<template>
	<view>
		<!-- 使用 u-tabs 组件 -->
		<u-tabs :list="tabList" :current="currentTab" lineWidth="45" :scrollable="false" lineColor="#ac9281"
			@change="handleTabChange" ></u-tabs>

		<!-- 待支付订单 -->
		<view v-if="currentTab === 0">
			<view v-for="(order, index) in unpaidData" :key="index">
				<view class="flex flex-column border-radius margin-top background padding">
					<view class="flex flex-row ">
						<image style="height: 80px;width: 80px;border-radius: 5px;" :src="order.activtyImage"
							mode="aspectFill"></image>
						<view style="margin-left: 5px;"></view>
						<u--text size="18" :text="order.activityTitle" style="font-weight: bold;"></u--text>
					</view>
					<view style="margin-top: 5px;">
						<u--text size="18" :text="'订单时间： '+formatCreatedAt(order.registrationTime)"
							style="font-weight: bold;"></u--text>
					</view>
					<view class="flex flex-row justify-between" style="margin-top: 3px;">
						<u--text :lines="1" color="red" size="20" :text="'总金额：￥'+order.totalMoney"
							style="font-weight: bold;"></u--text>
						<view>
							<u-button type="error" shape="circle" :hairline="true" text="去支付"
								@click="goToPay(order.registrationId)"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付订单 -->
		<view v-if="currentTab === 1">
			<view v-for="(orders, index) in paidData" :key="index" v-if="paidData.length > 0">
				<view class="flex flex-column border-radius margin-top background padding">
					<view class="flex flex-row ">
						<image style="height: 80px;width: 80px;border-radius: 5px;" :src="orders.activtyImage"
							mode="aspectFill"></image>
						<view style="margin-left: 5px;"></view>
						<u--text color="black" size="18" :text="orders.activityTitle"
							style="font-weight: bold;"></u--text>
					</view>
					<view style="margin-top: 5px;"></view>
					<u--text :lines="1" color="red" size="20" :text="'总金额：￥'+orders.totalMoney"
						style="font-weight: bold;"></u--text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				// 定义标签列表
				tabList: [{
						name: '待支付'
					},
					{
						name: '已支付'
					}
				],
				currentTab: 0,
				// 待支付数据，初始为空数组
				unpaidData: [],
				// 已支付数据，初始为空数组
				paidData: [],
				userId: uni.getStorageSync('userId'),
			};
		},
		created() {
			// 在组件创建后调用接口获取数据
			this.fetchUnpaidData();
			this.fetchPaidData();
		},
		methods: {
			// 获取待支付订单数据的接口调用
			fetchUnpaidData() {
				uni.request({
					url: `http://localhost:8090/activityRegistration/pendingPayments/${this.userId}`, // 替换为实际的待支付订单接口地址
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.unpaidData = res.data.data;
							console.log(this.unpaidData)
						} else {
							console.error('获取待支付订单数据失败:', res.errMsg);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			// 获取已支付订单数据的接口调用
			fetchPaidData() {
				// 这里使用 uni.request 作为示例，实际中根据接口地址和请求方式修改
				uni.request({
					url: `http://localhost:8090/activityRegistration/paidPayments/${this.userId}`, // 替换为实际的已支付订单接口地址
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.paidData = res.data.data;
						} else {
							console.error('获取已支付订单数据失败:', res.errMsg);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			// 处理标签切换事件
			handleTabChange(index) {
				this.currentTab = index.index;
			},
			// 格式化日期
			formatCreatedAt(time) {
				return moment(time).format('YYYY-MM-DD HH:mm:ss');
			},
			// 去支付
			goToPay(registrationId) {
				// 模拟弹出支付框
				uni.showModal({
					title: '支付确认',
					content: '确认支付该订单？',
					success: (res) => {
						if (res.confirm) {
							// 调用支付接口
							uni.request({
								url: `http://localhost:8090/activityRegistration/pay/${registrationId}`,
								method: 'POST',
								success: (res) => {
									if (res.data.code === 200) {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
										// 刷新数据
										this.fetchUnpaidData();
										this.fetchPaidData();
									} else {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										});
									}
								},
								fail: (err) => {
									console.error('请求失败:', err);
								}
							});
						}
					}
				});
			}
		}
	};
</script>